<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>学院管理</title>
  <link rel="stylesheet" href="../layui/dist/css/layui.css" media="all">
</head>
<style>
  #departmenttab{
        margin-top: 10px;
    }

  .layui-card-body {
    left: 20px;
    height: 30px;
  }

   .layui-table-cell{
    text-align:center;
    height: auto;
     width:150px;
    white-space: normal;
  }
</style>

<body>
  <div class="layui-fluid">
    <div class="layui-card">

      <div class="layui-card-body">
        <div style="padding-bottom: 10px;">
          <button class="layui-btn layuiadmin-btn-useradmin" data-type="batchdel">删除</button>
          <button class="layui-btn layuiadmin-btn-useradmin" data-type="add">添加</button>
          <button class="layui-btn layuiadmin-btn-useradmin" data-type="edit">编辑</button>
        </div>

      </div>
      <table id="departmenttab" lay-filter="departmenttab"></table>
    </div>
  </div>

  <script src="./JS/utils/request.js"></script>
  <script src="./JS/utils/auth.js"></script>
  <script src="../layui/layui.all.js"></script>
  <script>
    layui.use(['form', 'table', 'layer'], function () {
      var table = layui.table;
      var form = layui.form;
      var $ = layui.$;
      var layer = layui.layer;
      const token = localStorage.getItem('token')
      //第一个实例
      table.render({
        elem: '#departmenttab'
        , title: '学院列表'
        , height: 500
        , url: '/departments/list'
        //数据接口
        , page: true //开启分页
        ,limits:[10]
        , cols: [[ //表头
          { type: 'checkbox', sort: true},
          { title: '序号', type: 'numbers', autoSort: true },
          { field: 'departmentId',title: '学院编号'},
          , { field: 'departmentName', title: '院系名称'}
          , { field: 'contactPhone', title: '联系方式',}
          , { field: 'email', title: '邮箱', }
          , { field: 'description', title: '学院介绍',}
          , { field: 'createTime', title: '创建时间',  sort: true, }
          , { field: 'updateTime', title: '更新时间',  sort: true, }
        ]],
        headers: {
       'Authorization': token
  }
        , parseData: function (res) { //res 即为原始返回的数据
          console.log(res)
          return {
            "code": res.code, //解析接口状态
            "msg": res.msg, //解析提示文本
            "count": res.data.totalCount, //解析数据长度
            "data": res.data.list //解析数据列表
          }
        }

      })


      // 表格复选框点击删除监听事件
      $('button[data-type="batchdel"]').click(function () {
        var checkData = table.checkStatus('departmenttab').data;
        console.log(checkData)
        // 提取userId生成数组
        var departmentIds = checkData.map(function (item) {
          return item.departmentId;
        });
        // 转换为逗号分隔字符串
        var departmentIdsStr = departmentIds.join(',');
        console.log(departmentIdsStr)
        if (departmentIds.length === 0) {
          layer.msg('请至少选择一项');
          return;
        }
        deleteUser(departmentIdsStr)
      })

      // 新增信息监听事件
      $('button[data-type="add"]').click(function () {
        layer.open({
          type: 2,
          title: '新增院系',
          content: './edit.html',
          area: ['500px', '500px'],
          btn: ['确认', '取消'],
          yes: function (index,layero) {
            console.log(layero)
            // 获取iframe窗口对象
            var iframeWin = layero.find('iframe')[0].contentWindow;

            // 调用子页面的提交方法
            iframeWin.submitForm(function(success){
              if(success){
                layer.close(index);
                layer.msg('提交成功');
                table.reload('departmenttab', {
                  // 不传递任何参数，自动保留当前查询条件和分页状态
                  page: {
                    curr: 1
                  }
                });
              }
            });
            
          },
          btn2: function (index, layero) {
            //按钮【按钮二】的回调

            //return false 开启该代码可禁止点击该按钮关闭
          }
        })
      })

      // 编辑事件监听
      $('button[data-type="edit"]').click(function(){
        var checkData = table.checkStatus('departmenttab').data;
        console.log(checkData)
        // 验证选择数量
        if(checkData.length !== 1){
          return layer.msg('请选择一条要编辑的数据');
        }else{
          // 获取学院名称
          var departmentName = checkData[0].departmentName;

          // 打开弹出层
          layer.open({
            type: 2,
            title: '修改学院信息 - 学院名称：' + departmentName,
            content: 'edit.html?departmentId=' + departmentName,
            area: ['500px', '500px'],
            btn: ['保存', '取消'],
            yes: function (index,layero) {
              // console.log(layero)
              // 获取iframe窗口对象
              var iframeWin = layero.find('iframe')[0].contentWindow;

              // 调用子页面的提交方法
              iframeWin.updateForm(function(success){
                if(success){
                  layer.close(index);
                  layer.msg('更新成功');
                  table.reload('departmenttab', {
                    // 不传递任何参数，自动保留当前查询条件和分页状态
                    page: {
                      curr: 1
                    }
                  });
                }
              });

            },
            success: function(layero, index){
              // 获取iframe窗口对象
              var iframeWin = layero.find('iframe')[0].contentWindow;

              // 传递选中数据到子页面
              iframeWin.initFormData(checkData[0]);
            }
          });
        }


      });

      // 彻底删除院系函数
      function deleteUser(departmentIdsStr) {
        layer.confirm('确定删除该院系信息？', function (index) {
          $.ajax({
            url: '/departments/delete/' + departmentIdsStr, // 路径参数
            type: 'DELETE',
            headers:{
              'Authorization':localStorage.getItem('token')
    },
            success: function (res) {
              layer.msg('删除成功', { icon: 1 });
              // 刷新表格数据
              layui.table.reload('departmenttab');
            },
            error: function (xhr) {
              layer.msg('删除失败: ' + xhr.statusText, { icon: 2 });
            }
          });
          layer.close(index);
        });
      }
    });
  </script>
  <script>

  </script>
</body>

</html>